<template>
	<view class="pd15">
		<view class="cl-w ft15">请选择您要反馈的问题类型</view>
 		<view class="flex space text-center" style="flex-wrap: wrap">
			<view class="item" :class="{'on':intindex==index}" v-for="(item,index) in list" @click="tabclick(index)">
				{{item}}</view>
		</view> 
	
		<view class="mt25 pd15 bdr10 cl-w" style="background: #1f1f1f;">
			<textarea value="" placeholder="请描述您的问题，以便我们尽快为您处理（必填）" v-model="body" class="ft12" />
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view class="mt10 flex mr10" v-for="(item,index) in imgPath" v-if="imgPath!=''" @click="previewImage()"
					style="position: relative;">
					<image :src="item" mode="" style="width: 160rpx;height: 160rpx;"></image>
					<image src="@/static/img_del.png" mode="" @click.stop="deleteimg(index)"
						style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;"></image>
				</view>
				<view class="upload-box" v-if="imgPath.length<3" @click="uploadimg()"></view>
			</view>
		</view>
		<view class="mt25 ft15 cl-w">请输入联系人信息（可不填写）</view>
		<view class="mt10 flex alcenter border-bottom cl-w plt15">
			<view style="width: 120rpx;">联系人</view>
			<input type="text" value="" v-model="name" placeholder="请输入联系人" placeholder-style="color:#c3c9cf" />
		</view>
		<view class="mt5 flex alcenter border-bottom cl-w plt15">
			<view style="width: 120rpx;">联系电话</view>
			<input type="text" value="" v-model="phone" placeholder="请输入联系电话" placeholder-style="color:#c3c9cf" />
		</view>

		<view class="plt10 ft12" style="color: #c3c9cf;">联系人信息将为您加密传输，保护您的隐私</view>
		<view class="confirm" @click="$u.throttle(submit,5000)">提交反馈</view>
	</view>

</template>
<script>
		import configs from "@/common/config.js"
	export default {
		data() {
			return {
				phone: '',
				list: ['意见建议',  '账号问题', '急需解决', ],
				intindex: 0,
				imgPath: [],
				body: '',
				name: '',
				type: '',
				weixin: '',
				changfang:'',
				qiye_list:[],
				qiye_id:''
			}
		},
		onShow() {
			
		},
		methods: {
			bindPickerChange2(e) {
				this.qiye_id = e.target.value
				this.name =this.qiye_list[e.target.value].faren
				this.phone =this.qiye_list[e.target.value].phone
			},
			tabclick(e) {
				this.intindex = e;
				this.type = this.list[e]
			},
			to_tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			},
			uploadimg() {
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					success: res => {
						var token = uni.getStorageSync("token");
						uni.uploadFile({
							url:  configs.webUrl+ '/api/common/upload?token='+uni.getStorageSync("userinfo").token, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: {
								'token': uni.getStorageSync("userinfo").token,
							},
							success: (uploadFileRes) => {
								this.imgPath.push(JSON.parse(uploadFileRes.data).data.fullurl)
							},
						});
					},
				});
		
			},
			deleteimg(index) {
				var that = this;
				uni.showModal({
					content: this.$t('text.quedingshanchu'),
					success: function(res) {
						if (res.confirm) {
							that.imgPath.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			previewImage(type) {
				uni.previewImage({
					urls: this.imgPath,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			submit() {
				if (this.type == '') {
					this.type = this.list[0]
				}
		
				if (this.body == '') {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none'
					});
					return false;
				}
				
					
					
				this.$httpas.post2({
					data: {
						do: 'feedback',
						op: 'add',
						description: this.body,
						type: this.type,
						phone: this.phone,
						uname: this.name,
						images: this.imgPath,
						qiye_id: this.qiye_id,
					},
					success: res => {
						uni.showToast({
							title: ''+res,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					}
				})
			}
		},
		onLoad() {},
	}
</script>
<style>
	
</style>
<style lang="scss" scoped>
	.item {
		width: 100px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #fff;
		background: #1f1f1f;
		border: 1px solid #1f1f1f;
	}

	.on {
		background: rgba(26, 140, 239, 0.15);
		color: rgba(11, 144, 249, 1);
		border: 1px solid rgba(26, 140, 239, 0.15);
	}

	textarea {
		width: 100%;
		height: 90rpx;
	}

	input {
		margin-left: 40rpx;
		flex: 1;
	}

	.upload-box {
		margin-top: 20rpx;
		width: 160rpx;
		height: 160rpx;
		border: 1px solid #d9d9d9;
		position: relative;
	}

	.upload-box::before {
		width: 2px;
		height: 39.5px;
	}

	.upload-box::after {
		width: 39.5px;
		height: 2px;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}

	.border-bottom {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f7f7f7;
	}

	.confirm {
		margin: 50rpx 50rpx 0 50rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		position: relative;
		text-align: center;
		background: linear-gradient(-90deg, #4181fb, #4181fb);
		z-index: 2;
	}

	.confirm::after {
		content: "";
		z-index: -1;
		position: absolute;
		top: 3px;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 20px;
		background-color: #0b67df;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: .3;
	}
</style>
